<template>
	<div class="login">
	<div class="particles"></div>
		<div class="main">
		<div class="header ty-layout-header-bar-logo">
			<img src="../assets/logo1.png"> <img src="../assets/logo.png" style="height: 70px;"> <img src="../assets/logo2.png">
		</div>
		<Card class="card">
		<template #title><p>用户登录</p></template>
		<div class="demo-login">
			<Login @on-submit="handleLogin">
				<UserName name="username" />
				<Password name="password" />
				<Captcha class="login-captcha" name="captcha" :count-down="0">
					<template #text>
					  <div id="auth_code" class="auth_code"></div>
					</template>
				</Captcha>
				<Submit />
			</Login>
		</div>
		</Card>
		
		<div class="footer ty-layout-header-bar-logo">
			<span>{{currentYear}}&nbsp;&copy;&nbsp;汤阴县城市管理局&nbsp;&nbsp;技术支持：安阳金马软件科技有限公司&nbsp;
			</span> <a href="http://beian.miit.gov.cn/" style="text-decoration: none;color:#ccc">豫ICP备2022014844号</a> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41050202000336" style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;"></a>
		</div>
		</div>
	</div>
</template>
<script>
import {GVerify} from '@/libs/vcode.js'
import {dateUtils} from '@/libs/tools.js'
export default {
	data(){
		return {
			currentYear:dateUtils.getCurrentYear(),
			autoLogin:true,
			verifyCode: "",//vcode验证对象
		}
	},
	methods:{
		handleLogin(valid, { username, password,captcha }){
			if(!valid){return false}
			/* if(!this.verifyCode.validate(captcha)){
				this.$Message.error('验证码错误')
				this.verifyCode.refresh();
				return false
			} */
			this.$axios.post("login.action",{uid:username,password:password}).then(res=>{
			   if(res.data=='fail'){
				   this.$Message.error('用户名或密码错误')
    		   }else{
				   sessionStorage.setItem("uid",username)
    			   this.$router.push('/main/')
    		   }
			})
		
		}
	},
	mounted() {
		this.verifyCode = new GVerify("auth_code")
	}
}
</script>
<style>
.login{
width: 100vw;
height: 100vh;
}
.particles{
	width: 100%;
	height: 100%;position: fixed;
	background-image: url(@/assets/loginbg.jpg);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}
.main{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap:nowrap;
justify-content: space-between;
align-items: center;
}
.card{
width: 350px;
height: 320px;
background-color: #fff;
box-shadow: 0px 0px 20px 5px #aaa;
text-align: center;
}
.header,.footer{
width: 100%;height: 90px;color:#ccc;
}
.demo-login{
	margin: 0 auto !important;
}
.login-captcha .ivu-btn{
	padding: 0;
}
.login-captcha .ivu-btn div{
	position: relative;
	top: -24px;
}
.auth_code{
	width: 98px;
	height: 38px;
	border-radius: 8px;
}
</style>